<template>
  <div class="zong">
    <!-- 职位 实习 综合 -->
    <div class="block">
      <p @click="objdemo($event)">
        <span @click="fun('tuijian2')">推荐</span>
        <span @click="fun('fujin2')">附近</span>
        <span @click="fun('newbest2')">最新</span>
      </p>
      <p class="p2">
        <span>默认</span>
        <span>筛选</span>
      </p>
    </div>
    <component :is="com"></component>
  </div>
</template>

<script>
import tuijian2 from "@/views/fouth/tuijian2.vue";
import fujin2 from "@/views/fouth/fujin2.vue";
import newbest2 from "@/views/fouth/newbest2.vue";
export default {
  components: {
    tuijian2,
    fujin2,
    newbest2,
  },
  data() {
    return {
      com: "tuijian2",
    };
  },
  methods: {
    fun(obj) {
      this.com = obj;
    },
    objdemo(obj) {
      obj.target.parentNode.childNodes.forEach((item) => {
        item.classList.remove("active");
      });
      obj.target.classList.add("active");
    },
  },
};
</script>

<style scoped>
.zong {
  background: #f2f1f1;
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.block {
    display: flex;
    justify-content: space-between;
    padding: 0 0.20rem 0 0;
    background: #fff;
    line-height: 0.40rem;
}
.block > p span {
  margin-left: 0.2rem;
  line-height: 0.30rem;
  color: #666;
}
.block > .p2 > span{
padding: 0.04rem 0.06rem;
    background: #f1f1f1;
    font-size: 0.12rem;
    border-radius: 0.04rem;
}
.block > p span.active {
  color: #000;
  font-weight: bold;
}
</style>